<template>
  <div>
    <el-popover placement="bottom-start" width="246" v-model="visible">
      <div class="flex">
        <el-input
          v-model="form.min"
          placeholder="最小值"
          size="small"
          style="width: 90px"
        />
        <div class="linebox flexcenter">~</div>
        <el-input
          v-model="form.max"
          placeholder="最大值"
          size="small"
          style="width: 90px"
        />
      </div>
      <div>
        <el-button
          type="primary"
          class="w_full mt-10"
          size="mini"
          @click="submitNum"
        >确定
        </el-button
        >
      </div>
      <el-select
        slot="reference"
        v-model="numberstr"
        :placeholder="$attrs.placeholder?$attrs.placeholder :`请选择`"
        size="small"
        clearable
        @clear="handleClear"
        popper-class="pop_no_arrow"
        style="width:100%"
      >
      </el-select>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: "minOrMaxNumber",
  data() {
    return {
      numberstr:"",
      form: {
        min: null,
        max: null,
      },
      visible: false,
    }
  },
  methods: {
    handleClear() {
      this.form.max = "";
      this.form.min = "";
      let obj={
        max:this.form.max,
        min: this.form.min,
      }
      this.$emit('getNumber',obj);
    },
    submitNum() {
      let r = this.form.min + " ~ " + this.form.max;
      this.$set(this, 'numberstr', r);
      console.log('numberstr',this.numberstr);
      let obj={
        max:this.form.max,
        min: this.form.min,
      };
      this.$emit('getNumber',obj);
      this.visible = false;
    },
  },
}
</script>


<style scoped lang="scss">
.pop_no_arrow {
  margin-top: 4px;

  .popper__arrow {
    display: none;
  }
}
</style>
